<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动</title>

    <!-- css引入 -->
    <link rel="stylesheet" href="css/activity.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- js引入 -->
    <script src="js/activity.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/bootstrap.js"></script>

    <!-- 字体图标引入 -->
    <link rel="stylesheet" href="icon/iconfont.css">
</head>

<body style=" background-color: rgb(233,234,236);">

    <header class="hender-nav container-fluid">
        <a href="index.html">
            <img src="image/LOGO.PNG" alt="" style="height: 60px;width: 160px;">
        </a>
        <div class="nav-menu">
            <ul class="list-unstyled nav-fill">
                <li class="nav-item">
                    <a class="nav-link" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">论坛</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">活动</a>
                </li>
            </ul>
        </div>

        <div class="tool-box">
            <span class="iconfont">&#xe635;</span>
            <span class="iconfont">&#xe64a;</span>
            <span class="iconfont">&#xe941;</span>
            <span class="iconfont">&#xe670;</span>
        </div>

    </header>

    <div class="carousel-box container-fluid mt-2">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <!-- 指示符 -->
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
            </ol>

            <!-- 轮播图 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-80 img-fluid img-thumbnail" src="image/hd-1.png" alt="First slide">
                    <div class="carousel-caption">
                        <h3>标题</h3>
                        <p>介绍</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-80 img-fluid img-thumbnail" src="image/hd-4.png" alt="Second slide">
                    <div class="carousel-caption">
                        <h3>标题</h3>
                        <p>介绍</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-80 img-fluid img-thumbnail" src="image/hd-3.png" alt="Third slide">
                    <div class="carousel-caption">
                        <h3>标题</h3>
                        <p>介绍</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-80 img-fluid img-thumbnail" src="image/hd-2.png" alt="fourth slide">
                    <div class="carousel-caption">
                        <h3>标题</h3>
                        <p>介绍</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-80 img-fluid img-thumbnail" src="image/wall-bg.jpg" alt="fifth slide">
                    <div class="carousel-caption">
                        <h3>标题</h3>
                        <p>介绍</p>
                    </div>
                </div>
            </div>

            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" id="prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" id="next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <section class="wall-box container-fluid">
        <div id="cir-box">
            <img src="image/wall-1.jpg" class="pic" id="pic1">
            <img src="image/wall-2.jpg" class="pic" id="pic2">
            <img src="image/wall-3.jpg" class="pic" id="pic3">
            <img src="image/wall-4.jpg" class="pic" id="pic4">
            <img src="image/wall-5.jpg" class="pic" id="pic5">
            <img src="image/wall-6.jpg" class="pic" id="pic6">
            <img src="image/wall-7.jpg" class="pic" id="pic7">
            <img src="image/wall-8.jpg" class="pic" id="pic8">
            <img src="image/wall-9.jpg" class="pic" id="pic9">
            <img src="image/wall-10.jpg" class="pic" id="pic10">
            <img src="image/wall-1.jpg" class="pic" id="pic11">
            <img src="image/wall-1.jpg" class="pic" id="pic12">
        </div>

    </section>

    <section class=" square-box ">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs container" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#square">活动广场</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#menu1">阿巴阿巴</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#menu2">阿巴阿巴</a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">

            <div id="square" class="container tab-pane active">

                <div class="lattice">
                    <div class="row">
                        <div class="col">
                            <div class="title-badge">
                                <h4>New/上新</h4>
                            </div>
                            <div class="new-part">
                                <div class="act-tab">
                                    <input type="checkbox" id="tab1" checked>
                                    <label for="tab1" class="tab-label">图灵学社团建</label>
                                    <div class="tab-content">
                                        <img src="image/hd-1.png" alt="" class="img-fluid ">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="title-badge">
                                <h4>History/历史</h4>
                            </div>
                            <div class="new-part">
                                <div class="act-tab">
                                    <input type="checkbox" id="tab2" checked>
                                    <label for="tab2" class="tab-label">新成员欢迎会</label>
                                    <div class="tab-content">
                                        <img src="image/hd-1.png" alt="" class="img-fluid ">
                                    </div>
                                </div>
                                <div class="act-tab">
                                    <input type="checkbox" id="tab3">
                                    <label for="tab3" class="tab-label">图灵官网开发第一次会议</label>
                                    <div class="tab-content">
                                        <img src="image/hd-2.png" alt="" class="img-fluid ">
                                    </div>
                                </div>
                                <div class="act-tab">
                                    <input type="checkbox" id="tab4">
                                    <label for="tab4" class="tab-label">英语部第一次活动</label>
                                    <div class="tab-content">
                                        <img src="image/hd-3.png" alt="" class="img-fluid ">
                                    </div>
                                </div>
                                <div class="act-tab ">
                                    <input type="checkbox" id="tab5">
                                    <label for="tab5" class="tab-label">图灵官网开发第二次会议</label>
                                    <div class="tab-content">
                                        <img src="image/hd-4.png" alt="" class="img-fluid ">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div id="menu1" class="container tab-pane fade"><br>
                <h3>阿巴阿巴</h3>
                <p>别看了，这里是空的</p>
            </div>
            <div id="menu2" class="container tab-pane fade"><br>
                <h3>阿巴阿巴</h3>
                <p>别看了，这里是空的</p>
            </div>
        </div>
    </section>

    <footer class="footer-box row">
        <div class="left-box col text-center mt-5">
            <h4><strong>联系我们</strong></h4>
            <p>地址：桂电北海校区</p>
        </div>

        <div class="mid-box col text-center">
            <img src="image/LOGO.PNG" alt="" style="width: 200px;">
            <h4>版权所有：桂电北海校区图灵学社</h4>
        </div>
        <div class="right-box col">
            <h4 class="pl-5 mt-4"> <strong>校外VPN访问</strong></h4>
        </div>
    </footer>

    <div class="btn-box" id="top">
        <span class="iconfont" id="backToTop">&#xf0026;</span>
        <span class="iconfont">&#xe982;</span>
    </div>

</body>

<script>
    // JS文件
    // 定义一些常量
    const PI = Math.PI; // 圆周率
    const R = 160; // 圆的半径
    const N = 12; // 图片的数量
    const SPEED = 0.01; // 图片的速度
    const pics = document.getElementsByClassName("pic"); // 获取所有图片的元素

    // 定义一个函数，用来计算每张图片的圆心坐标
    function getCenter(angle) {
        // 使用三角函数的正弦和余弦来计算
        let x = R * Math.cos(angle) + 300; // x坐标
        let y = R * Math.sin(angle) + 300; // y坐标
        return [x, y]; // 返回一个数组
    }

    // 定义一个函数，用来更新每张图片的位置和旋转角度
    function update() {
        // 遍历所有图片
        for (let i = 0; i < N; i++) {
            // 获取当前图片的元素
            let pic = pics[i];
            // 获取当前图片的旋转角度
            let angle = i * 2 * PI / N;
            // 计算当前图片的圆心坐标
            let [x, y] = getCenter(angle);
            // 设置当前图片的位置
            pic.style.left = x - 50 + "px";
            pic.style.top = y - 50 + "px";
            // 设置当前图片的旋转角度
            pic.style.transform = `rotate(${angle}rad) translate(${R}px) rotate(${-angle}rad)`;
        }
    }

    // 定义一个函数，用来让图片沿着圆周运动
    function animate() {
        // 调用更新函数
        update();
        // 遍历所有图片
        for (let i = 0; i < N; i++) {
            // 获取当前图片的元素
            let pic = pics[i];
            // 获取当前图片的旋转角度
            let angle = i * 2 * PI / N;
            // 增加当前图片的旋转角度
            angle += SPEED;
            // 设置当前图片的旋转角度
            pic.style.transform = `rotate(${angle}rad) translate(${R}px) rotate(${-angle}rad)`;
        }
        // 使用requestAnimationFrame函数来重复调用动画函数
        requestAnimationFrame(animate);
    }

    // 调用动画函数
    animate();

</script>

</html>